import { Component } from 'react';
import { Tabbar } from 'react-vant';
import {Outlet} from 'react-router-dom';
import {UserO, ShoppingCartO, WapHomeO } from '@react-vant/icons';
import WithRouter from '@/router/WithRouter';
class Index extends Component {
    render() {
        return (
            <div>
                {/* 展示二级路由 */}
                <Outlet/>
                <Tabbar activeColor="rgb(238,10,36)" onChange={(active)=>this.tabbarChange(active)} value={this.props.active}>
                    <Tabbar.Item icon={<WapHomeO />}>首页</Tabbar.Item>
                    <Tabbar.Item icon={<ShoppingCartO  />}>购物车</Tabbar.Item>
                    <Tabbar.Item icon={<UserO  />}>我的</Tabbar.Item>
                </Tabbar>
            </div>
        )
    }
    tabbarChange(active){
        console.log(this.props)
        switch(active){
            case 0:
                // 跳转到首页
                this.props.router.navigate('home')
                break;
            case 1:
                // 跳转到购物车
                this.props.router.navigate('cart')
                break;
            case 2: 
                // 跳转到我的
                this.props.router.navigate('mine')
                break;
            default:
                this.props.router.navigate('home')
        }
    }
}
export default WithRouter(Index);